<template>
	<!-- 录制语音 -->
	<u-popup :show="_show" mode="bottom" :round="8">
		<view class="voice-lay">
			<view class="close" @click="closeVoicePopup"><text class="bwfont bw-shibai"></text></view>
			<view v-if="voiceStatus == 0" class="viice-start fboxCol Ycenter" @click="soundRecording(0)">
				<image class="icon-btn btn-start" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/voice-2.png" mode=""></image>
				<view class="font28 tit">开始录制</view>
			</view>
			<view v-if="voiceStatus == 1" class="viice-stop fboxCol Ycenter">
				<!-- <view class="voice-tips fboxRow Ycenter Xcenter color-969699 font24">最长录制时间：50秒</view> -->
				<view class="voice-time fboxRow Ycenter Xcenter font48">{{ getMinuteTime(voiceTime) }}</view>
				<view class="icon-line line-animation"></view>
				<view class="ft"><image class="icon-btn btn-stop" @click="soundRecording(1)" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/voice-5.png" mode=""></image></view>
			</view>
			<view v-if="voiceStatus == 2" class="viice-result">
				<!-- <view class="voice-tips fboxRow Ycenter Xcenter color-969699 font24">最长录制时间：50秒</view> -->
				<view class="voice-time fboxRow Ycenter Xcenter font48">{{ getMinuteTime(voiceTime) }}</view>
				<view class="icon-line" :class="{ 'line-animation': music_play }"></view>
				<view class="ft fboxRow Ycenter">
					<view class="btn-cancel fboxRow Ycenter Xcenter" @click="closeVoice"><u-icon name="trash" color="#111018" size="47rpx"></u-icon></view>
					<view class="flex1 fboxRow Ycenter Xcenter" @click="soundRecording(2)">
						<image v-if="!music_play" class="icon-btn" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/voice-4.png" mode=""></image>
						<image v-if="music_play" class="icon-btn" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/voice-5.png" mode=""></image>
					</view>
					<view class="btn-upload fboxRow Ycenter Xcenter" @click="submitVoice"><u-icon name="checkmark" color="#111018" size="47rpx"></u-icon></view>
				</view>
			</view>
		</view>
	</u-popup>
</template>
<script>
import {fileUploadAnon} from '@/api/index.js'
let innerAudioContext = null
let recorderManager = uni.getRecorderManager();
export default {
	props:{
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			// 录制语音参数
			// isVoicePopup: false, // 录制语音
			voiceTitle: '点击开始录制',
			voiceStatus: 0, // 0 : 未开始   1：录制中   2 : 录制完成
			voiceTime: 0, // 录制时间
			voicePath: '', //录制的文件路径
			music_play: false, // 录制播放
			timeupdata: null
		};
	},
	computed:{
		_show:{
			get(){
				return this.show
			},
			set(val){
				this.$emit('update:show',val)
			}
		},
	},
	destroyed() {
		if(innerAudioContext){
			innerAudioContext.destroy()
		}
	},
	methods: {
		// 关闭录制弹窗
		closeVoicePopup(){
			if(this.voiceStatus == 0 || this.voiceStatus == 2){
				this._show = false
				this.closeVoice()
			}else{
				uni.showToast({
					icon: 'none',
					title: '正在录制语音'
				})
			}
		},
		// 计算时间
		getMinuteTime(data) {
			let minute = parseInt(data / 60);
			let second = parseInt(data % 60);
			if (minute.toString().length == 1) minute = `0${minute}`;
			if (second.toString().length == 1) second = `0${second}`;
			return `${minute}:${second}`;
		},
		// 关闭录音
		closeVoice() {
			this.voiceTime = 0;
			this.voiceStatus = 0;
			this.voiceTitle = '点击开始录音';
			this.music_play = false;
			clearInterval(this.timeupdata);
		},
		// 语音录制
		soundRecording(status) {
			console.log('recorderManager')
			if (status == 0) {
				//开始录音
				const options = {
					//参数
					duration: 50000, //600000,
					sampleRate: 44100,
					numberOfChannels: 1,
					encodeBitRate: 192000,
					format: 'mp3',
					frameSize: 50
				};
				recorderManager.start(options);
				this.timeupdata = setInterval(() => {
					this.voiceTime++;
					if (this.voiceTime == 50) {
						this.soundRecording(1);
					}
				}, 1000);
				this.voiceStatus = 1;
				this.voiceTitle = '点击结束录音';
			} else if (status == 1) {
				//结束录音
				this.voiceStatus = 2;
				this.voiceTitle = '录制完成';
				clearInterval(this.timeupdata);
				recorderManager.stop();
				recorderManager.onStop(res => {
					this.voicePath = res.tempFilePath; //记录文件路径
				});
			} else if (status == 2) {
				//录制完成, 点击播放录音
				innerAudioContext.src = this.voicePath;
				if (this.music_play) {
					this.music_play = false;
					innerAudioContext.pause();
				} else {
					this.music_play = true;
					innerAudioContext.play();
				}
				innerAudioContext.onEnded(() => {
					this.music_play = false;
				});
			}
		},
		// 录制语音提交
		submitVoice() {
			const file = {
				name: 'voice'+new Date().getTime()+'.mp3',
				path: this.voicePath
			}
			uni.showLoading({
				title: '上传中',
				mask: true
			})
			// 上传音频文件
			fileUploadAnon(file).then(res => {
				if (res.data) {
					this.closeVoicePopup()
					this.$emit('update', res.data.url)
				}
			}).finally(err=>{
				uni.hideLoading()
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.voice-lay {
	position: relative;
	background-color: var(--viewBgColor);
	width: 100vw;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	overflow: hidden;
	z-index: 10;
}
.voice-lay .close{position: absolute;right: 26rpx;top: 24rpx;}
.voice-lay .icon-btn {
	width: 120rpx;
	height: 120rpx;
}
.voice-tips {
	height: 104rpx;
}
.viice-start {
	padding: 104rpx 0 0;
	height: 440rpx;
}
.viice-start .tit {
	margin-top: 18rpx;
}
.viice-stop {
	padding: 46rpx 0 0;
	height: 540rpx;
}
.viice-stop .ft {
	padding: 60rpx 0 0;
}
.viice-result {
	padding: 46rpx 0 0;
	height: 540rpx;
}
.viice-result .ft {
	padding: 60rpx 160rpx 0;
}
.viice-result .btn-cancel,
.viice-result .btn-upload {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;
	background-color: #e8edf1;
}
.voice-lay .icon-line {
	margin: 58rpx auto 0;
	width: 340rpx;
	height: 70rpx;
	background: url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/icon-audio-line3.png') repeat-x top center;
	background-size: auto 70rpx;
}
.voice-lay .line-animation {
	animation: animate_background 10s linear 0s infinite;
}

@-webkit-keyframes animate_background {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -340rpx 0;
	}
}
</style>
